import React, { memo, useState, useEffect } from "react";

import store from "./store";

import { subAction } from "./store/actionCreators";

const index = memo(() => {
  const [count, setCount] = useState(store.getState().counter);
  useEffect(() => {
    const unsubscribue = store.subscribe(() => {
      //开启订阅
      setCount(store.getState().counter);
    });
    return () => {
      unsubscribue(); //结束订阅
    };
  }, []);
  return (
    <div>
      about
      <h2>哦豁技术:{count}</h2>
      <button
        onClick={(e) => {
          store.dispatch(subAction(1));
        }}
      >
        -1
      </button>
      <button
        onClick={(e) => {
          store.dispatch(subAction(5));
        }}
      >
        -5
      </button>
    </div>
  );
});

export default index;
